<script setup>
import { Tab, Tag, Image as VanImage, Search, Badge } from 'vant';
import { ref } from 'vue';
import { getMessagelist } from '@/api/message';

// 导入路由
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()

// 定义一个开关显示下拉列表
const switchC = ref(true);
const active = ref(0);

const activeNames = ref(1);




// 导航切换功能的实现
function changeShow(e) {
    // console.log(e.target.innerText);
    if (e.target.innerText === '消息') {
        // console.log(router);
        router.push('information')
    } else if (e.target.innerText === '好友') {
        router.push('friends')
    } else if (e.target.innerText === '群聊') {
        router.push('group')
    }
}

function selectLi(e) {
    console.log('您点击了:',e);
    if (e === '扫一扫') {
        console.log('s');
        // router.push('information')
    } else if (e === '二维码') {
        console.log('er');
        router.push('/grid4')
    } else if (e === '创建群组') {
        console.log('ch');
        router.push('/newgroup')
    }
}
function switchState() {
    switchC.value = true
    console.log(switchC.value);
    activeNames.value = 1
}
</script>
<template>
    <div class="box">
        <div class="content">
            <div class="top ">
                <!-- 1.顶部导航 -->
                <nav @click="changeShow($event)">
                    <div class="left">
                        <li>消息</li>
                        <li>好友</li>
                        <li>群聊</li>
                    </div>
                    <div class="rigth">

                        <van-collapse v-model="activeNames" :accordion="switchC">
                            <van-collapse-item title="+" name="1" :is-link="false">
                                <div @click="selectLi($event.target.innerText)">
                                    <li>扫一扫</li>
                                    <li>二维码</li>
                                    <li>创建群组</li>
                                </div>
                            </van-collapse-item>
   

                    </van-collapse>


            </div>
            </nav>
            <!-- <van-tabs v-model:active="active" currentTarget line-width="0" title-active-color="rgb(55, 119, 230)"
                                                            @click-tab="changeShow($event)">
                                                            <van-tab title="消息" style="width: 10px;"></van-tab>
                                                            <van-tab title="好友" style="width: 10px;"></van-tab>
                                                            <van-tab title="群聊" style="width: 10px;"></van-tab>
                                                            <van-tab title="+"></van-tab>
                                                        </van-tabs> -->
        </div>

    </div>
    <router-view @click="switchState"></router-view>
</div></template>

<style lang="scss" >
* {
    margin: 0;
    padding: 0;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}

.top {
    height: 48px;

    nav {
        padding-top: 2px;
        // height: 46px;
        display: flex;
        // padding: 0px 14px;
        justify-content: space-between;
        align-content: space-around;
        flex-wrap: wrap;
        box-sizing: border-box;

        li {
            // border: 1px solid red;
            list-style-type: none;
            text-align: center;
        }

        .left {
            width: 50%;
            display: flex;
            justify-content: space-between;
            padding-left: 5px;

            li {
                width: 33%;
                line-height: 46px;
                // font-weight: 700;
                font-size: 17px;
            }
        }

        .rigth {
            flex: 1;
            position: relative;
            top: 0;
            right: 0px;
            z-index: 999;
            text-align: right;
            --van-collapse-item-content-line-height: 40px;
            --van-collapse-item-content-padding: 0px;

            .van-hairline,
            .van-hairline--top,
            .van-hairline--left,
            .van-hairline--right,
            .van-hairline--bottom,
            .van-hairline--surround,
            .van-hairline--top-bottom {
                width: 40px;
                position: absolute;
                right: 10px;
            }

            .van-collapse-item__wrapper {
                width: 100px;
                position: fixed;
                right: 10px;
            }

            span {
                display: inline-block;
                width: 16px;
                line-height: 16px;
                font-size: 26px;
                border: 2px solid black;
                border-radius: 50%;
            }

            li {
                width: 100px;
            }
        }

    }

    .rigth {
        width: 50%;
    }

}
</style>
